<template>
    <div class="searchj-box">
        <div class="row">
            <div class="left">
                <el-icon>
                    <Search />
                </el-icon>
                <span>筛选搜索</span>
            </div>
            <div class="right">
                <el-button @click="reset">重置</el-button>
                <el-button type="primary" @click="queryRoleList">查询搜索</el-button>
            </div>
        </div>
        <div class="row">
            <span>角色名称:</span>
            <el-input placeholder="请输入角色名称" v-model="queryParams.keyword"></el-input>
        </div>
    </div>
    <div class="add-area">
        <div class="row">
            <div class="add-left">
                <el-icon>
                    <Tickets />
                </el-icon>
                <span>数据列表</span>
            </div>
            <div class="add-right">
                <el-button type="primary" @click="showDialog = true" v-permission="'addUser'">添加</el-button>
            </div>
        </div>
    </div>
    <el-table :data="userList" border table-layout="auto" cell-class-name="align-c">
        <el-table-column label="编号" prop="id" cell-class-name="align-c" />
        <el-table-column label="角色名称" prop="name" />
        <el-table-column label="描述" prop="description" />
        <el-table-column label="用户数" prop="adminCount" />
        <el-table-column label="添加时间" prop="createTime">
            <template #default="{ row }">
                <span>{{ formateDate(row.createTime) }}</span>
            </template>
        </el-table-column>
        <el-table-column label="是否启用" prop="status">
            <template #default="{ row }">
                <el-switch v-model="row.status" @change="switchStatue(row)" :active-value="1" :inactive-value="0" />
            </template>
        </el-table-column>
        <el-table-column label="操作">
            <template #default="{ row }">
                <el-button text type="primary" @click="router.push('/ums/allocMenu?id='+row.id)" v-permission="'allocRole'">分配菜单</el-button>
                <el-button text type="primary" @click="router.push('/ums/allocResource?id=' + row.id)">分配资源</el-button>
                <el-button text type="primary" @click="edit(row.id, row.name, row.description)"
                    v-permission="'editRole'">编辑</el-button>
            </template>
        </el-table-column>
    </el-table>
    <ElConfigProvider :locale="zhCn">
        <div class="page">
            <el-pagination v-model:current-page="queryParams.pageNum" v-model:page-size="queryParams.pageSize"
                :page-sizes="[10, 20, 50, 100]" background layout="total, sizes, prev, pager, next, jumper"
                :total="total" @size-change="queryRoleList" @current-change="queryRoleList" />
        </div>
    </ElConfigProvider>
    <editRole :show="showDialog" @hide="closeDialog" @ShutDown="ShutDown" :id="editId" :name="editName"
        :description="editDescription" />
    <AllocRole :show="RoleList" :id="RoleId" @hide="closeRoleList" />
</template>
<script setup lang="ts">
import { ref, reactive } from "vue";
import { RoleListAPI, switchRoleStatusAPI } from "./api";
import { Search, Tickets } from '@element-plus/icons-vue';
import { ElConfigProvider, ElMessage } from 'element-plus';
import zhCn from 'element-plus/lib/locale/lang/zh-cn';
import { formateDate } from '@/utils'
import editRole from './editRole.vue'
import AllocRole from './allocRole.vue'
import { useRouter } from "vue-router"

const router = useRouter()
const RoleList = ref(false)
const RoleId = ref(0)

const editId = ref(0)
const editName = ref<string>()
const editDescription = ref<string>()
const edit = (id: number, name: string, description: string) => {
    showDialog.value = true;
    editId.value = id;
    editName.value = name;
    editDescription.value = description;
}
const closeRoleList = () => {
    RoleList.value = false
    RoleId.value = 0
}

const showDialog = ref(false)
const closeDialog = (isRolad?: boolean) => {
    showDialog.value = false;
    editId.value = 0
    if (isRolad) queryRoleList()
}
const ShutDown = () => {
    showDialog.value = false;
}
const userList = ref<IRoleModel[]>([]);
const switchStatue = (row: IRoleModel) => {
    switchRoleStatusAPI(row.id!, row.status).then((res) => {
        if (res.code === 200) {
            ElMessage.success("修改成功")
        } else {
            row.status = row.status === 1 ? 0 : 1
        }
    }).catch(() => {
        row.status = row.status === 1 ? 0 : 1
    })
}
const queryParams = reactive<IUserListParams>({
    keyword: '',
    pageNum: 1,
    pageSize: 10,
});

const reset = () => {
    queryParams.keyword = '';
    queryRoleList()
}

const total = ref(0);
const queryRoleList = () => {
    RoleListAPI(queryParams).then((res) => {
        if (res.code === 200) {
            userList.value = res.data.list;
            total.value = res.data.total
        }
    });

}
queryRoleList()

</script>
<style lang="scss" scoped>
:deep(.align-c) {
    .cell {
        text-align: center !important;
    }
}

.searchj-box {
    box-shadow: 0 0 4px #ccc;
    border-radius: 10px;
    padding: 10px;
    margin-bottom: 20px;

    .row {
        padding: 10px 0;
        display: flex;

        &:first-child {
            justify-content: space-between;
        }

        &:last-child {
            width: 400px;

            span {
                width: 100px;
            }
        }
    }
}

.add-area {
    box-shadow: 0 0 4px #ccc;
    border-radius: 10px;
    padding: 10px;
    margin-bottom: 20px;

    .row {
        padding: 2px 0;
        display: flex;

        &:first-child {
            justify-content: space-between;
        }
    }
}

.page {
    padding-top: 10px;
    display: flex;
    justify-content: center;
}
</style>